<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../../javascript/api.js"></script> <!-- api.js必须放到最开头 -->
	    <script src="../../../javascript/axios.js"></script>
	    <script src="../../../javascript/vue.js"></script>
	   	<script src="../../../javascript/jquery.js" type="text/javascript" charset="utf-8"></script>
	    <link rel="stylesheet" type="text/css" href="../css/apiAddGroundChat.css"/>
	</head>
	<body>
		<div class="content" id="apiAddGroundChat">
			<div class="left">
				<p class="choose_peopele_p">选择人员:</p>
				<div class="choose_box">
					<input placeholder="搜索" class="input_search" type="" name="" id="" value=""  v-model="search"/>
					<p class="p_choose_title">{{chooseTitle}}</p>
					<dl v-for="item in dlChoose">
						<dt onclick="choose_this(this)">{{item.dt}} <span >></span></dt>
						<dd v-for="item_dd in item.chooseItem" @click="ChooseDd(item_dd)">
							<img :src="item_dd.headImg"/>
							<span>
								{{item_dd.name}}
							</span>
						</dd>
					</dl>
				</div>
			</div>
			<div class="right">
				<p class="p_has_choose">已经选择：{{hasChoose.length}}/100 <span @click="hasChoose=[]" class="span_clean">清空</span></p>
				<div class="div_has_choose">
					<ul style="margin-top: 20px;">
						<li v-for="item ,index in hasChoose">
							<img width="35px" height="35px" :src="item.headImg"/>
							<span>{{item.name}}</span>
							<i @click="liSplice(index)">X</i>
						</li>
					</ul>
				</div>
				<p style="font-size: 16px;color: #666666; padding: 15px;">群组名称：</p>
				<input class="input_ground_name" v-model="groundName" type="" name="" id="" value="" placeholder="不超过50字"/>
				<button class="button_sure" @click="sureGroundName">确定</button>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function choose_this(ev){
			$(ev).parent("dl").toggleClass("choose");
		}
		new Vue({
			el :"#apiAddGroundChat",
			data:{
				search:'',
				chooseTitle:"金越软件",
				groundName: "",/*组名*/
				dlChoose:[
					{
						dt:'数据服务中心',
						chooseItem:[
							{
								headImg:"../../../images/lefticon/user.png",
								name :"李四"
							},
							{
								headImg:"../../../images/lefticon/user.png",
								name :"张三"
							},
							{
								headImg:"../../../images/lefticon/user.png",
								name :"张武"
							},
							{
								headImg:"../../../images/lefticon/user.png",
								name :"陈刘"
							}
						]
					},
					{
						dt:'大数据产品中心',
						chooseItem:[
							{
								headImg:"../../../images/lefticon/user.png",
								name :"李四"
							},
							{
								headImg:"../../../images/lefticon/user.png",
								name :"张三"
							},
							{
								headImg:"../../../images/lefticon/user.png",
								name :"张武"
							},
							{
								headImg:"../../../images/lefticon/user.png",
								name :"陈刘"
							}
						]
					}
					
				],
				hasChoose:[
					
				]
			},
			methods:{
				ChooseDd(val){
					this.hasChoose.push(val);
				},
				liSplice(val){
					this.hasChoose.splice(val,1);
				},
				sureGroundName(){
					if(this.groundName.length===0||this.groundName.length>50){
						return false;
					}
				}
			}
			
			
			
		})
	</script>
</html>
